<template>
	<view class="container">
		<view class="search">
			<text class="search-icon">&#xe8b6;</text>
			<input class="search-input" placeholder="请输入搜索内容" />
		</view>
		<view class="user-list">
			<view class="user-item" v-for="(user, index) in users" :key="index" @tap="selectUser(index)">
				<image class="user-avatar" :src="user.avatar" />
				<view class="user-info">
					<view class="user-name">{{ user.name }}
						<text class="user-membership"
							:class="['membership', getMembershipClass(user.membership)]">{{ user.membership }}</text>
					</view>
					<view class="user-stats">
						<text>共{{ user.total }}次, 剩余{{ user.remaining }}次</text>
					</view>
				</view>
				<view class="user-select">
					<view class="circle" :class="{'selected': user.selected}">
						<view v-if="user.selected" class="checkmark">&#10003;</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				users: [{
						name: '蒙娜丽莎',
						avatar: '/static/logo.png',
						membership: '银卡会员',
						total: 24,
						remaining: 10,
						selected: false
					},
					{
						name: '孙晓晓',
						avatar: '/static/logo.png',
						membership: '金卡会员',
						total: 24,
						remaining: 10,
						selected: false
					},
					{
						name: '孙晓晓',
						avatar: '/static/logo.png',
						membership: '普通会员',
						total: 24,
						remaining: 10,
						selected: false
					},
					{
						name: '张某某',
						avatar: '/static/logo.png',
						membership: '金卡会员',
						total: 24,
						remaining: 10,
						selected: false
					}
				]
			};
		},
		methods: {
			selectUser(index) {
				this.users.forEach((user, i) => {
					user.selected = (i === index);
				});
			},
			getMembershipClass(membership) {
				switch (membership) {
					case '银卡会员':
						return 'silver';
					case '金卡会员':
						return 'gold';
					case '普通会员':
						return 'normal';
					default:
						return '';
				}
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 0 20rpx;
	}

	.search {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		margin: 20rpx 0;
	}

	.search-icon {
		font-size: 32rpx;
		color: #999;
	}

	.search-input {
		flex: 1;
		border: none;
		background-color: transparent;
		margin-left: 10rpx;
		font-size: 28rpx;
	}

	.user-list {
		margin-top: 20rpx;
	}

	.user-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.user-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.user-name {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.user-membership {
		margin-left: 10rpx;
		padding: 0 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.user-membership.silver {
		background-color: #e0e0e0;
		color: #555;
	}

	.user-membership.gold {
		background-color: #ffd700;
		color: #daa520;
	}

	.user-membership.normal {
		background-color: #8fbc8b;
		color: #6b8e23;
	}

	.user-stats {
		font-size: 28rpx;
		color: #999;
	}

	.user-select {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.circle {
		width: 28rpx;
		height: 28rpx;
		border-radius: 14rpx;
		border: 2rpx solid #ff9800;
		position: relative;
	}

	.circle.selected {
		background-color: #ff9800;
	}

	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 20rpx;
	}
</style>